<script setup>
import {ref, reactive} from 'vue'
import {Search} from "@element-plus/icons-vue";

const data = [
  {
    label: '全部知识库',
    children: [
      {
        label: '产教融合',
      },{
        label: "产品开发"
      }
    ],
  }
]

const defaultProps = {
  children: 'children',
  label: 'label',
}

const handleNodeClick = (data) => {
  console.log(data)
}

</script>

<template>
  <el-container style="height: 100%">
    <el-aside width="300px" style="border: 1px solid #eee;border-right: none; padding: 20px">
      <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
      />
    </el-aside>
    <el-main style="border: 1px solid #eee; background: #f5f5f5;">
      <div style="width: 80%; margin: auto">
        <div style="display: flex; justify-content: center; width: 100%">
          <el-input
              placeholder="搜索"
              size="large"
              class="input-with-select">
            <template #append>
              <el-button :icon="Search" type="primary" />
            </template>
          </el-input>
        </div>
        <el-card style="margin-top: 20px">
          <template #header>
            <h1>智能回答</h1>
          </template>
          <div>
            暂无内容
          </div>
        </el-card>
        <el-card style="margin-top: 10px; background: #f5f5f5">
          <template #header>
            <h1>0/3选择文件</h1>
          </template>
          <ul>
            <li v-for="i in 10">
              <div style="height: 40px">环境二十大要求加快发展数字经济并提出推进教育数字化国家职业教育改革实施方案职教20条2019年2月国务院发布职教20条提到了工学结合产教...融合校企合作等指导性意见意见在第九条中提到要知行合一工学结合要总结现代学徒制和企业新型学徒制试点经验校企共同研究制定人才培养方案及时将新...</div>
              <div style="height: 20px; display: flex">
                <img width="24" src="../../assets/pdf.44344347.svg" alt="" style="display: block">
                <span style="display: block; margin-left: 4px; margin-top: 2px; cursor: pointer">久其女娲低代码编程技术基础平台建设方案V3.0.pptx</span>
              </div>
            </li>
          </ul>
          <el-pagination style="margin-top: 10px" :total="400"></el-pagination>
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
  ul li {
    list-style: none;
    height: 60px;
    background: #ffffff;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>